<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form ref="form" :model="form" label-width="120px" >


                    <el-form-item label="选评测文件">
                        <!--                <input type="file"   @change="changeFile($event)"  webkitdirectory >{{packfilepath}}</input>-->
                        <el-col :span="11">
                            <el-upload style="display: inline-block;"
                                       class="upload-demo"
                                       ref="upload"
                                       action="https://jsonplaceholder.typicode.com/posts/"
                                       :on-preview="handlePreview"
                                       :on-remove="handleRemove"
                                       :file-list="fileList"
                                       :limit="1"
                                       :auto-upload="false">
                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                <!--                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
                                <!--                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                            </el-upload>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="参数1" prop="description"><!--:label-width="formLabelWidth"-->
                        <el-input v-model="form.description" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="参数2" prop="systemSelection" >
                        <el-select v-model="form.systemSelection" prop="systemSelection" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in systemOptions"
                                    :key="item.id"
                                    :label="item.systemName"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="参数3" prop="description"><!--:label-width="formLabelWidth"-->
                        <el-input v-model="form.description" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">开始评测</el-button>
                        <!--                <el-button @click="onCancel">Cancel</el-button>-->
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="5"style="height: 400px;overflow-y: auto">
                <div class="demo-image__lazy" >
<!--                    <el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>-->
                    <ul class="infinite-list"  style="overflow:auto">
                        <li v-for="i in files" @click="load(i)" class="infinite-list-item">{{ i }}</li>
                    </ul>
                </div>
            </el-col>
            <el-col :span="7">
                <img style="width: 200px;" onfocus=this.blur() id="img_a" border=0 align="middle" src="login_image/a_1.jpg" alt="没有图片！"> </img>
            </el-col>
        </el-row>



        <el-main>
            <el-collapse v-model="activeNames" @change="">
                <el-collapse-item title="控制台" name="1">
                    <div id="terminal" style="margin-bottom: 2px" ref="terminal"></div>
                </el-collapse-item>

            </el-collapse>
        </el-main>
    </div>


</template>

<script>
    import { Terminal } from "xterm"
    import "xterm/css/xterm.css"
    import "xterm/lib/xterm.js"
    var term
    const img_path = 'D:\\project\\electron-vue-elementui\\1--Handshaking\\'
    export default {
        name: "task_detection",
        data () {
            return {
                urls: [
                    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
                    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
                    'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
                    'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
                    'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
                ],
                activeNames: ['1'],
                fileList: [],
                files: [],
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                }
            }
        },
        methods: {
            getFiles () {
               /* // const img_path = 'D:\\project\\electron-vue-elementui\\1--Handshaking'
                const files = require.context('D:\\project\\electron-vue-elementui\\1--Handshaking', false, /.(png|jpg|jpeg|gif|bmp|webp)$/).keys()
                // const files = require.context('' + img_path, false, /.(png|jpg|jpeg|gif|bmp|webp)$/).keys()//不可行
                console.log(files);
                for (let item of files) {
                    this.files.push(item.substring(2))
                }*/
            },
            load (name) {
                $("#img_a").attr("src", img_path + name);
            },
            submitUpload() {
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            }
        },
        mounted() {
            term = new Terminal({
                rendererType: "canvas", //渲染类型
                rows: 30, //行数
                // cols: parseInt(_this.cols), // 不指定行数，自动回车后光标从下一行开始
                convertEol: true, //启用时，光标将设置为下一行的开头
                //   scrollback: 50, //终端中的回滚量
                disableStdin: false, //是否应禁用输入。
                cursorStyle: "underline", //光标样式
                cursorBlink: true, //光标闪烁
                theme: {
                    foreground: "#7e9192", //字体
                    background: "#002833", //背景色
                    cursor: "help", //设置光标
                    lineHeight: 16
                }
            });
            // 挂载到dom
            term.open(this.$refs["terminal"]);
            term.writeln("Welcome to use Superman... ");
            new Promise((resolve, reject) => {
                this.getFiles()
                if (this.files.length > 0) {
                    resolve()
                }
            }).then(() => {
                console.log(this.files)
            }).catch(err => {
                console.log(err)
            })
        }
    }
</script>

<style scoped>
    .infinite-list {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .infinite-list .infinite-list-item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 34px;
        background: #e8f3fe;
        margin: 10px;
        color: #7dbcfc;
        cursor: pointer;
    }
</style>